<template>
    <div class="app-container"> 
        <el-row  style="width:97%;box-sizing: inherit;">
            <el-col :span="4">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    书名：
                        <el-input style="width: 150px" clearable v-model="form.book_name" placeholder="请输入搜索内容"
                      autocomplete="off"/> 
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    作者：
                    <el-select  style="width:150px;" v-model="form.author" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in authorlist"
                        :key="item.book_author_id"
                        :label="item.author_name+'('+item.nationality+')'"
                        :value="item.book_author_id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    国籍：
                    <el-select style="width:150px;" clearable filterable v-model="form.nationality" placeholder="请选择">
                        <el-option
                        v-for="item in country_list"
                        :key="item.zh"
                        :label="item.zh"
                        :value="item.zh">
                        </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    类型：
                    <el-select  style="width:150px;" v-model="form.book_type" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in typelist"
                        :key="item.book_type_id"
                        :label="item.type_name"
                        :value="item.book_type_id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple" style="color: #AAA;">
                    出版社：
                    <el-select style="width:150px;" v-model="form.press" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in presslist"
                        :key="item.book_press_id"
                        :label="item.press_name"
                        :value="item.book_press_id">
                    </el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light" style="color: #AAA;">
                    <el-button icon="el-icon-search" type="primary" style="margin-left: 10px" circle @click="getlistdata(true)"></el-button>
                    <el-button type="primary" @click="clearsearch()" icon="el-icon-delete" circle></el-button>
                    <el-button type="primary" @click="dialog=true" icon="el-icon-circle-plus-outline" circle></el-button>
                </div>
                </el-col>
            </el-row> 
            <div class="book-size"> 
                共找到 <span style="color:red">{{book_size}}</span> 本书
            </div>  
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                  header-cell-class-name="tableheader">

            <el-table-column align="center" label="类型">
                <template slot-scope="scope">
                    {{ scope.row.show_type	 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="书名">
                <template slot-scope="scope">
                    {{ scope.row.book_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="作者">
                <template slot-scope="scope">
                    {{ scope.row.show_author	 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="版本">
                <template slot-scope="scope">
                    {{ scope.row.version	 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="封面">
                <template slot-scope="scope">
                    <el-image 
                            style="width: 100px; height: 100px"
                            :src="scope.row.cover_pic"
                            :preview-src-list="[scope.row.cover_pic]">
                        </el-image> 
                </template>
            </el-table-column>
            <el-table-column align="center" label="出版年">
                <template slot-scope="scope">
                    {{ scope.row.year }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="出版社">
                <template slot-scope="scope">
                    {{ scope.row.press_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="条码">
                <template slot-scope="scope">
                    {{ scope.row.bar_code }}
                </template>
            </el-table-column>  
            <el-table-column align="center" label="译者">
                <template slot-scope="scope">
                    {{ scope.row.translator	 }}
                </template>
            </el-table-column>


            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit" circle> </el-button>
                    <el-button type="danger" @click="delbtn(scope.row)" icon="el-icon-delete" circle> </el-button>
                    
                </template>
            </el-table-column>
        </el-table> 
        <div class="pagination">
            <el-pagination
                    style="text-align: center"
                    layout="prev, pager, next"
                    small
                    :current-page="form.page"
                    :page-size="form.pagesize"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"/>
        </div>


        <el-dialog title="书籍设置" :close-on-click-modal="false" :visible.sync="dialog" width="55%" @close="dialogclose">
            <el-form :model="dialogform" ref="dialogform" :rules="rule" label-width="120px">
                <el-form-item label="书名：" prop="book_name">
                    <el-input  placeholder="请输入书名"  style="width:200px;" v-model="dialogform.book_name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="上传封面：" prop="cover_pic">
                    <el-upload
                        class="avatar-uploader"
                        :action= "action_url"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="dialogform.cover_pic" :src="dialogform.cover_pic" class="avatar_new">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                </el-form-item>

                <el-form-item label="出版年:" prop="year">
                    <el-date-picker
                        v-model="dialogform.year"
                        type="year"
                        placeholder="选择年" style="width:200px;">
                        </el-date-picker>
                </el-form-item>
                 
                <el-form-item label="出版社:" prop="press_id">
                    <el-select v-model="dialogform.press_id" filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in presslist"
                        :key="item.book_press_id"
                        :label="item.press_name"
                        :value="item.book_press_id">
                    </el-option>
                    </el-select>

                    <el-button type="primary" small style="margin-left:5px;" @click="add_press_dialog=true" icon="el-icon-circle-plus-outline">未找到出版社？</el-button>
                </el-form-item>

 
                <el-form-item label="作者:" prop="author_ids">
                    <el-select style="width:70%;" v-model="dialogform.author_ids" multiple  filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in authorlist"
                        :key="item.book_author_id"
                        :label="item.author_name+'('+item.nationality+')'"
                        :value="item.book_author_id">
                    </el-option>
                    </el-select>
                    <el-button type="primary" small style="margin-left:5px;" @click="add_author_dialog=true" icon="el-icon-circle-plus-outline">未找到作者?</el-button>
                </el-form-item>

                <el-form-item label="类型:" prop="type_ids">
                    <el-select style="width:70%;" v-model="dialogform.type_ids" multiple  filterable clearable placeholder="请选择">
                        <el-option
                        v-for="item in typelist"
                        :key="item.book_type_id"
                        :label="item.type_name"
                        :value="item.book_type_id">
                    </el-option>
                    </el-select>
                    <el-button type="primary" small style="margin-left:5px;" @click="add_type_dialog=true" icon="el-icon-circle-plus-outline">未找到类型?</el-button>
                </el-form-item>

                <el-form-item label="版本:" prop="version">
                    <el-input placeholder="请输入图书版本" style="width:200px;" v-model="dialogform.version" autocomplete="off"/>
                </el-form-item>

                <el-form-item label="译者:" prop="translator">
                    <el-input placeholder="请输入译者(非必填)" style="width:200px;" v-model="dialogform.translator" autocomplete="off"/>
                </el-form-item>

                <el-form-item label="条码:" prop="bar_code">
                    <el-input placeholder="请输入条码(非必填)" style="width:200px;" v-model="dialogform.bar_code" autocomplete="off"/>
                </el-form-item>

                <el-form-item label="备注:" prop="diy_mark">
                    <el-input  type="textarea" :rows="5" placeholder="请输入内容" v-model="dialogform.diy_mark" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogbtn">确  定</el-button>
            </div>
        </el-dialog>

         <!-- 出版社： -->
        <el-dialog title="保存出版社" :visible.sync="add_press_dialog" width="35%">
        <el-form :model="addform_press" ref="addform_press" :rules="rule_press" label-width="100px">
          <el-form-item label="类型名称：" prop="press_name">
            <el-input clearable v-model="addform_press.press_name" autocomplete="off"/>
          </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn_press">保存</el-button>
        </div>
      </el-dialog> 
       <!-- //作者 -->
       <el-dialog title="保存作者" :visible.sync="add_author_dialog" width="35%">
        <el-form :model="addform_author" ref="addform_author" :rules="rule_author" label-width="100px">
          <el-form-item label="名称" prop="author_name">
            <el-input clearable v-model="addform_author.author_name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="真名：" prop="true_name">
            <el-input clearable v-model="addform_author.true_name" autocomplete="off"/>
          </el-form-item> 

            <el-form-item label="国籍：" prop="nationality">
                <el-select clearable filterable v-model="addform_author.nationality" placeholder="请选择">
                    <el-option
                    v-for="item in country_list"
                    :key="item.zh"
                    :label="item.zh"
                    :value="item.zh">
                    </el-option>
                </el-select>
            </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn_author">保存</el-button>
        </div>
      </el-dialog>  
      <!-- //类型名称： -->
      <el-dialog title="保存类型" :visible.sync="add_type_dialog" width="35%">
        <el-form :model="addform_type" ref="addform_type" :rules="rule_type" label-width="100px">
          <el-form-item label="类型名称：" prop="type_name">
            <el-input clearable v-model="addform_type.type_name" autocomplete="off"/>
          </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn_type">保存</el-button>
        </div>
      </el-dialog>  
    </div>
</template>

<script type="es6">
import * as imageConversion from 'image-conversion'
import { get_country } from '@/utils/country';
import { allowedNodeEnvironmentFlags } from 'process';
export default {
    data() {
        return {
            action_url: this.$api + "/tools/save_file",
            form: {
                book_name: '',
                press:'',
                nationality:'',
                author:'',
                book_type:'',
                page: 1,
                pagesize: 4
            },
            dialogform: {
                book_id: '',
                book_name: '',
                cover_pic:'',
                year:'',
                press_id:'',
                bar_code:'',
                diy_mark:'',
                version:'',
                translator:'',
                author_ids: [],
                type_ids:[]
            },
            rule: {
                book_name: [
                    { required: true, message: '此项为必填项' }
                ],
            },
            props: {
                label: function (item) {
                    return item.meta.title
                },
                children: "children"
            }, 
            list: [],
            total: 0,
            listLoading: true,
            dialog: false,
            presslist:[],
            authorlist:[],
            typelist:[],
            country_list:[],
            book_size:0,
            // 出版社
            add_press_dialog:false,
            addform_press: {
                book_press_id: '',
                press_name: '', 
            },
            rule_press: {
                press_name: [
                    {required: true, message: '此项为必填项'},
                ], 
            },
            //作者
            add_author_dialog:false,
            addform_author: {
                book_author_id: '',
                author_name: '',
                nationality: '',
                true_name: ''
            }, 
            rule_author: {
                author_name: [
                    {required: true, message: '此项为必填项'},
            ],
            },
            //类型
            add_type_dialog:false,
            addform_type: {
                book_type_id: '',
                type_name: '', 
            }, 
            rule_type: {
                type_name: [
                    {required: true, message: '此项为必填项'},
                ], 
            },   
        };
    },
    created() {
        this.country_list = get_country();
        this.getlistdata(); 
        this.get_presslist();
        this.get_authorlist();
        this.get_typelist();
    },
    methods: {
        clearsearch(){
            this.form = {
                book_name: '',
                press:'',
                nationality:'',
                author:'',
                book_type:'',
                page: 1,
                pagesize: 4
            }
        },
        //获取角色数据
        getlistdata(isquery) {
            if (isquery === true) {
                this.form.page = 1
            }
            this.listLoading = true;
            this.$post(this.$api + '/get_book_base_pagelist', this.form)
                .then((res) => {
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.list = res.rows;  
                        this.total = res.total; 
                        this.book_size = res.total;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        }, 
        //打开编辑弹框
        openedit(item) {  
            this.dialog = true;
            for(var i in this.dialogform)
            { 
                if(i=="author_ids"){ 
                    this.dialogform[i]=item["auth_array"]; 
                }
                else if(i=="type_ids"){this.dialogform[i]=item["type_array"];}
                else if(i=="year"){ 
                    this.dialogform[i] = new Date(item.year+'/01/01');
                }
                else{this.dialogform[i] = item[i]; }
            }  
        },
        //关闭编辑弹框
        dialogclose() {
            this.dialogform = {
                book_id: '',
                book_name: '',
                cover_pic:'',
                year:'',
                press_id:this.dialogform.press_id,
                bar_code:'',
                diy_mark:'',
                version:'',
                translator:'',
                author_ids: this.dialogform.author_ids,
                type_ids:this.dialogform.type_ids
            };  
        },
        //确定修改按钮
        dialogbtn() {
            this.$refs['dialogform'].validate((valid) => {
                if (valid) {
                    this.listLoading = true; 
                    if(this.dialogform.year !== undefined && this.dialogform.year!==''&& this.dialogform.year!==null)
                    {
                        var date = new Date(this.dialogform.year);
                        this.dialogform.year = date.getFullYear();
                    } 
                    this.$post(this.$api + '/save_book_base', this.dialogform)
                        .then((res) => {
                            this.listLoading = false;
                            if (res.code === 0) {
                                this.$notify({
                                    title: '成功',
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.dialog = false;
                                this.getlistdata();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                }
            })
        },
        //删除
        delbtn(item) {
            this.$confirm('确认删除？?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                this.$get(this.$api + '/del_book_base', {
                    'book_id': item.book_id
                })
                    .then((res) => {
                        this.listLoading = false;
                        if (res.code === 0) {
                            this.$notify({
                                title: '成功',
                                message: res.msg,
                                type: 'success'
                            });
                            this.getlistdata();
                        } else {
                            this.$notify({
                                title: '失败',
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
            })
        },
        handleSizeChange(v) {
            this.form.pagesize = v;
            this.getlistdata();
        },
        handleCurrentChange(v) {
            this.form.page = v;
            this.getlistdata();
        },
        handleAvatarSuccess(res, file) {
                console.log(res);
                //this.cover_pic = URL.createObjectURL(file.raw);
                if(res.code ==0)
                { 
                    this.dialogform.cover_pic = res.data.url;
                }
                else{
                    this.$notify({
                        title: '上传失败',
                        message: res.msg,
                        type: 'error'
                    });
                }
        },
        beforeAvatarUpload(file) { 
            // 上传之前校验
            return new Promise((resolve, reject) => {
                //压缩到400KB,大于200KB的图片都会进行压缩，小于则不会
                imageConversion.compressAccurately(file, 200).then(res => { // console.log(res)
                res = new File([res], file.name, { type: res.type, lastModified: Date.now() }) 
                resolve(res)
                })
            }) 
        },
        get_presslist(do_something){
            this.$post(this.$api + '/get_book_press_pagelist', { 
                'isPage': true,
                'page': 1,
                'pagesize': 500
            })
                .then((res) => { 
                    if (res.code === 0) {
                        this.presslist = res.rows; 
                        if(do_something!==undefined)
                        {
                            do_something();
                        }
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        get_authorlist(do_something){
            this.$post(this.$api + '/get_book_author_pagelist', { 
                'isPage': true,
                'page': 1,
                'pagesize': 500
            })
                .then((res) => { 
                    if (res.code === 0) {
                        this.authorlist = res.rows; 
                        if(do_something!==undefined)
                        {
                            do_something();
                        }
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        get_typelist(do_something){
            this.$post(this.$api + '/get_book_type_pagelist', { 
                'isPage': true,
                'page': 1,
                'pagesize': 500
            })
                .then((res) => { 
                    if (res.code === 0) {
                        this.typelist = res.rows;
                        if(do_something!==undefined)
                        {
                            do_something();
                        }
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        addbtn_press(){
            this.listLoading = true;
            this.$post(this.$api + '/add_book_press', this.addform_press)
            .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                });
                this.add_press_dialog = false;
                this.addform_press = {
                    book_press_id: '',
                    press_name: '', 
                };  
                this.get_presslist(()=>{
                    this.dialogform.press_id=res.data;
                });
                } else {
                this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                });
                }
            }); 
        },
        addbtn_author(){
            this.listLoading = true;
            this.$post(this.$api + '/add_book_author', this.addform_author)
            .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                });
                this.add_author_dialog = false;
                this.addform_author = {
                    book_author_id: '',
                    author_name: '',
                    nationality: '',
                    true_name: ''
                }; 
                this.get_authorlist(()=>{ 
                    var  new_author_ids =[]; 
                    for(var i in this.dialogform.author_ids)
                    {
                        new_author_ids.push(this.dialogform.author_ids[i]); 
                    }
                    new_author_ids.push(res.data);  
                    this.dialogform.author_ids = new_author_ids;
                }); 
                } else {
                this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                });
                }
            });
        },
        addbtn_type(){
            this.listLoading = true;
            this.$post(this.$api + '/save_book_type', this.addform_type)
            .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                });
                this.add_type_dialog = false;
                this.addform_type = {
                    book_type_id: '',
                    type_name: '', 
                };
                this.get_typelist(()=>{
                    var  new_type_ids =[]; 
                    for(var i in this.dialogform.type_ids)
                    {
                        new_type_ids.push(this.dialogform.type_ids[i]); 
                    }
                    new_type_ids.push(res.data);  
                    this.dialogform.type_ids = new_type_ids;
                }); 
                } else {
                this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                });
                }
            });
        }
    }
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar_new {
    max-width: 300px; 
    display: block;
  }
  .book-size {
     text-align: left;
     font-size: 16px; 
     line-height: 40px;
     color: #AAA;
  }
</style>